<template>
	<view class="container">
		<view class="top">
			<view class="banner">
				<u-image width="100%" height="200rpx" :showLoading="true" :src="src" radius="10px"></u-image>
			</view>
			<view class="menu">
				<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<u-image 
					  class="image_background" 
					  width="100%" 
					  :showLoading="true" 
					  :src="item.bgImg"
					  radius="10px"
					>
					</u-image>
					<view class="text_left_top">
						<view>{{item.typeName}}</view>
					</view>
					<view class="text_left_down" v-if="item.typeName==='实名举报'" style="color: white;">
						<view>实名</view>
					</view>
					<view class="text_left_down" v-else-if="item.typeName==='匿名举报'" style="color:white;">
						<view>匿名</view>
					</view>
					<view class="text_left_down" v-else="item.typeName==='举报查询'" style="color:white;">
						<view>实名或匿名</view>
					</view>
					<u-icon class="icon" name="arrow-right" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../static/banner0133.jpg',
				list: [
					{
						bgImg: "../../static/举报_slices/mipmap-xxxhdpi/编组.png",
						typeName: "实名举报",
						url: '/pages/realUserReport/realUserReport'
					},
					{
						bgImg: "../../static/举报_slices/mipmap-xxxhdpi/编组备份.png",
						typeName: "匿名举报",
						url: '/pages/anonymousReport/anonymousReport'
					},
					{
						bgImg: "../../static/举报_slices/mipmap-xxxhdpi/编组 10.png",
						typeName: "举报查询",
						url:'/pages/select/select'
					},
				]
			}
		},
		methods: {
			//跳转页面
			goDetail(i) {
				uni.switchTab({
					url:i.url
				})
			},
		}
	}
</script>
<style lang="scss">
	.container {
		background: white;
		height: 100%;
		.top {
			position: relative;
			.banner{
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;
			}
			.menu {
				display: grid;
				padding: 10rpx 24rpx;
				.item {
					width: 100%;
					// height: 160rpx;
					border-radius: 10rpx;
					margin-bottom: 15rpx;
					position: relative;
					.image_background{
						z-index: 1;
						width: 100%;
						// height: 160rpx;
						border-radius: 10rpx;
					}
					.text_left_top {
						display: block;
						font-size: 28rpx;
						font-weight: bold;
						color: white;
						z-index: 10;
						position: absolute;
						top: 70rpx;
						left: 218rpx;
					}
					.text_left_down {
						display: block;
						font-size: 26rpx;
						z-index: 10;
						position: absolute;
						top: 116rpx;
						left: 218rpx;
					}
					.icon {
						z-index: 10;
						position: absolute;
						top: 90rpx;
						right: 76rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 48rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 50%;
						opacity: 0.84;
					}
				}
			}
		}
	}
</style>
